<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
        <el-form-item label="产品名称" prop="productName">
            <el-input v-model="queryParams.productName" placeholder="请输入产品名称" clearable size="small" @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="产品大类" prop="typeLevel1Code">
            <el-select v-model="queryParams.typeLevel1Code" @change="typeLevel2Fn(queryParams.typeLevel1Code)">
                <el-option v-for="(item,index) in typeLevel1List" :key="index" :label="item.typeLevel1Name" :value="item.typeLevel1Code" />
            </el-select>
        </el-form-item>
        <el-form-item label="产品小类" prop="typeLevel2Code">
            <el-select v-model="queryParams.typeLevel2Code">
                <el-option v-for="(item,index) in typeLevel2List" :key="index" :label="item.typeLevel2Name" :value="item.typeLevel2Code" />
            </el-select>
        </el-form-item>
      
        <el-form-item label="资方类型" prop="productSelect">
            <el-select v-model="queryParams.assets_type" @change="getAssetsInfo(queryParams.assets_type)">
                <el-option v-for="(item,index) in assetsTypeList" :key="index" :label="item.typeName" :value="item.typeCode" />
            </el-select>
        </el-form-item>
        <el-form-item label="资方名称" prop="assetsInfoId">
            <el-select v-model="queryParams.assets_info_id">
                <el-option v-for="(item,index) in assetsInfoList" :key="index" :label="item.assetsName" :value="item.assetsCode" />
            </el-select>
        </el-form-item>
        
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:productSelect:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['system:productSelect:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          icon="el-icon-edit"
          size="mini"
          :disabled="multiple"
          @click="startStop"
          v-hasPermi="['system:productSelect:edit']"
        >启停用</el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="infoList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="产品名称" align="center" prop="product_name" />
        <el-table-column label="产品显示名称" align="center" prop="show_name" />
        <el-table-column label="产品大类名称" align="center" prop="type_level1_name" />
        <el-table-column label="产品小类名称" align="center" prop="type_level2_name" />
        <el-table-column label="资方类型" align="center" prop="assets_type_name" />
        <el-table-column label="资方名称" align="center" prop="assets_info_name" />
        <el-table-column label="贷款上限" align="center" prop="max_loan" />
        <el-table-column label="贷款下限" align="center" prop="min_loan" />
        <el-table-column label="是否停用" align="center" prop="status">
                <template slot-scope="scope">
                    {{scope.row.status === 0 ? '正常' : '停用'}}
                </template>
        </el-table-column>
        <el-table-column label="备注" align="center" prop="remark" />
    </el-table>
    
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改资方类型信息对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
        <el-form :model="dialogParams" ref="dialogForm" :inline="true" label-width="68px">
            <el-form-item label="产品名称" prop="productName">
                <el-input v-model="dialogParams.productName" placeholder="请输入产品名称" clearable size="small" @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="产品大类" prop="typeLevel1Code">
                <el-select v-model="dialogParams.typeLevel1Code" @change="typeLevel2Fn(dialogParams.typeLevel1Code)">
                    <el-option v-for="(item,index) in typeLevel1List" :key="index" :label="item.typeLevel1Name" :value="item.typeLevel1Code" />
                </el-select>
            </el-form-item>
            <el-form-item label="产品小类" prop="typeLevel2Code">
                <el-select v-model="dialogParams.typeLevel2Code">
                    <el-option v-for="(item,index) in typeLevel2List" :key="index" :label="item.typeLevel2Name" :value="item.typeLevel2Code" />
                </el-select>
            </el-form-item>
        
            <el-form-item label="资方类型" prop="productSelect">
                <el-select v-model="dialogParams.assets_type" @change="getAssetsInfo(dialogParams.assets_type)">
                    <el-option v-for="(item,index) in assetsTypeList" :key="index" :label="item.typeName" :value="item.typeCode" />
                </el-select>
            </el-form-item>
            <el-form-item label="资方名称" prop="assetsInfoId">
                <el-select v-model="dialogParams.assets_info_id">
                    <el-option v-for="(item,index) in assetsInfoList" :key="index" :label="item.assetsName" :value="item.assetsCode" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="dialogSearch">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="dialogReset">重置</el-button>
            </el-form-item>
        </el-form>
      
        <el-table v-loading="loading" :data="dialogList" @selection-change="dialogSelectChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="产品名称" align="center" prop="product_name" />
            <el-table-column label="产品大类名称" align="center" prop="type_level1_name" />
            <el-table-column label="产品小类名称" align="center" prop="type_level2_name" />
            <el-table-column label="资方类型" align="center" prop="assets_type_name" />
            <el-table-column label="资方名称" align="center" prop="assets_info_name" />
            <el-table-column label="贷款上限" align="center" prop="max_loan" />
            <el-table-column label="贷款下限" align="center" prop="min_loan" />
            <el-table-column label="备注" align="center" prop="remark" />
        </el-table>
        <pagination
        v-show="dialogTotal>0"
        :total="dialogTotal"
        :page.sync="dialogParams.pageNum"
        :limit.sync="dialogParams.pageSize"
        @pagination="getDialogList"
        />

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listInfo, delInfo, stopOrOpen, exportAssetsType,exportAssetsInfo, dialogInfo,dialogSave } from "@/api/system/proSelect";

export default {
  name: "productSelect",
  data() {
    return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 总条数
        total: 0,
        // 资方类型信息表格数据
        infoList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
            pageNum: 1,
            pageSize: 10,
            productName: undefined,
            assets_info_id: undefined,
            assets_type: undefined,
            typeLevel1Code: undefined,
            typeLevel2Code: undefined,
        },
        dialogParams: {
            pageNum: 1,
            pageSize: 10,
            productName: undefined,
            assets_info_id: undefined,
            assets_type: undefined,
            typeLevel1Code: undefined,
            typeLevel2Code: undefined,
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {},

        assetsTypeList:[],
        assetsInfoList:[],
        typeLevel1List: [
            {typeLevel1Name: '房产抵押贷', typeLevel1Code: '100'},
            {typeLevel1Name: '企业贷款', typeLevel1Code: '200'},
            {typeLevel1Name: '信用贷款', typeLevel1Code: '300'},
            {typeLevel1Name: '车辆抵押贷', typeLevel1Code: '400'}
        ],
        typeLevel2List: [
            {typeLevel2Name: '房产一押',typeLevel2Code: '10001'},
            {typeLevel2Name: '房产二押',typeLevel2Code: '10002'},
            {typeLevel2Name: '企业税贷',typeLevel2Code: '20001'},
            {typeLevel2Name: '企业发票贷',typeLevel2Code: '20002'},
            {typeLevel2Name: '按揭房信用贷款',typeLevel2Code: '30001'},
            {typeLevel2Name: '公积金贷款',typeLevel2Code: '30002'},
            {typeLevel2Name: '装修贷贷',typeLevel2Code: '30007'},
            {typeLevel2Name: '按揭车信用贷',typeLevel2Code: '30004'},
            {typeLevel2Name: '保单信用贷',typeLevel2Code: '30005'},
            {typeLevel2Name: '打卡工资信用贷',typeLevel2Code: '30006'},
            {typeLevel2Name: '车辆抵押',typeLevel2Code: '40001'}
        ],

        // 弹框内数据
        dialogList: [],
        dialogTotal: 0,
        dialogIds: []
    };
  },
  created() {
    this.getList();
    this.getAssetsType();
  },
  methods: {
        /** 查询资方类型信息列表 */
        getList() {
            this.loading = true;
            listInfo(this.queryParams).then(response => {
                this.infoList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },

        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        
        // 表单重置
        reset() {
            this.form = {
                productName: undefined,
                assets_info_id: undefined,
                assets_type: undefined,
                typeLevel1Code: undefined,
                typeLevel2Code: undefined,
            };
            this.resetForm("form");
        },

        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },

        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },

        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.id)
            this.single = selection.length!=1
            this.multiple = !selection.length
        },

        /** 新增按钮操作 */
        handleAdd() {
            this.getDialogList();
            this.reset();
            this.open = true;
            this.title = "添加资方类型信息";
        },

        /** 删除按钮操作 */
        handleDelete(row) {
            let ids = '';
            if(row.id){
                ids = row.id;
            }else{
                ids = this.ids.join(',');
            }
            let that = this;
            this.$confirm('是否确认删除选中的数据项?', "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(function() {
                delInfo({ids: ids}).then(res => {
                    if(res.code === 'success'){
                        that.msgSuccess("删除成功");
                        that.getList();
                    }
                });
            }).catch(function() {});
        },

        /** 启停按钮操作 */
        startStop(row) {
            let ids = '';
            if(row.id){
                ids = row.id;
            }else{
                ids = this.ids.join(',');
            }
            stopOrOpen({ids: ids}).then(res => {
                if(res.code === 'success'){
                    this.msgSuccess("启停设置成功");
                    this.getList();
                }
            });
        },

        // 弹框选中数据
        dialogSelectChange(selection){
            this.dialogIds = selection.map(item => item.id)
        },
        
        /** 提交按钮 */
        submitForm: function() {
            let params = {
                ids : this.dialogIds.join(','),
            }
            dialogSave(params).then(res => {
                if(res.code === 'success'){
                    this.msgSuccess("保存成功");
                    this.open = false;
                    this.getList();
                }
            });
        },
    
        // 获取资方类型数据
        getAssetsType(){
            exportAssetsType().then(res => {
                if(res.code === 'success'){
                    this.assetsTypeList = [];
                    res.data.forEach(item => {
                        this.assetsTypeList.push({ typeCode: item.typeCode, typeName: item.typeName })
                    });
                }
            });
        },

        // 根据类型获取资方数据
        getAssetsInfo(type){
            this.queryParams.assetsInfoId = '';
            exportAssetsInfo({productSelect: type}).then(res => {
                if(res.code === 'success'){
                    this.assetsInfoList = [];
                    res.data.forEach(item => {
                        this.assetsInfoList.push({assetsCode: item.assetsCode, assetsName: item.assetsName})
                    });
                }
            });
        },

        // 获取产品小类
        typeLevel2Fn(type){
            this.queryParams.typeLevel2Code = '';
            if(type === '100'){
                this.typeLevel2List = [
                    {typeLevel2Name: '房产一押',typeLevel2Code: '10001'},
                    {typeLevel2Name: '房产二押',typeLevel2Code: '10002'}
                ]
            }else if(type === '200'){
                this.typeLevel2List = [
                    {typeLevel2Name: '企业税贷',typeLevel2Code: '20001'},
                    {typeLevel2Name: '企业发票贷',typeLevel2Code: '20002'},
                ]
            }else if(type === '300'){
                this.typeLevel2List = [
                    { typeLevel2Name: '按揭房信用贷款',typeLevel2Code: '30001'},
                    { typeLevel2Name: '公积金贷款',typeLevel2Code: '30002'},
                    { typeLevel2Name: '装修贷贷',typeLevel2Code: '30007'},
                    { typeLevel2Name: '按揭车信用贷',typeLevel2Code: '30004'},
                    { typeLevel2Name: '保单信用贷',typeLevel2Code: '30005'},
                    { typeLevel2Name: '打卡工资信用贷',typeLevel2Code: '30006'}
                ]
            }else if(type === '400'){
                this.typeLevel2List = [
                    { typeLevel2Name: '车辆抵押',typeLevel2Code: '40001' }
                ]
            }
        },
        
        // 弹框列表
        getDialogList(){
            dialogInfo(this.dialogParams).then(response => {
                this.dialogList = response.rows;
                this.dialogTotal = response.total;
            });
        },

        // 弹框内搜索按钮
        dialogSearch(){
            this.dialogParams.pageNum = 1;
            this.getDialogList();
        },

        // 弹框内重置按钮
        dialogReset(){
            this.resetForm("dialogForm");
            this.dialogSearch();
        },
  }
};
</script>
<style scoped>
    .linkA{
        color: #20a0ff;
    }
</style>